<template>
  <!--表单-->
    <el-form :inline="true" :model="formData" label-width="50px">
        <el-form-item>
            <el-select v-model="formData.areaId" class="m-2" placeholder="Select" @change="change">
                <el-option v-for="item in areaData" :label="item.name" :value="item.id"/>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-input v-model="formData.name" placeholder="仓库名称"/>
        </el-form-item>
        <el-form-item>
            <el-input v-model="formData.brief" placeholder="简介"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="add">
                新增
            </el-button>
        </el-form-item>
    </el-form>
  <!--分隔线-->
    <el-divider>
        <el-icon>
            <star-filled/>
        </el-icon>
    </el-divider>
  <!--表格-->

    <el-table :data="tableData" border :header-cell-style="{background:'#eef1f6',color:'#606266'}">
        <el-table-column fixed="left" prop="id" label="编号" min-width="40" align="center"/>
        <el-table-column prop="name" label="名称" min-width="40"/>
        <el-table-column prop="brief" label="简介" min-width="120"/>
        <el-table-column prop="lastUpdateBy" label="更新人" min-width="60"/>
        <el-table-column prop="lastUpdateTime" label="更新时间" min-width="100" align="center" :formatter="formatter"/>
        <el-table-column fixed="right" label="操作"  width="180" align="center">
            <template #default="scope">
                <el-button type="primary" size="middle" @click="editClick(scope.row)">编辑</el-button>
                <el-button type="danger" size="middle" @click="deleteClick(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>


  <!--修改抽屉-->
    <el-drawer ref="drawerRef" v-model="dialog" title="仓库修改" direction="btt" size="50%">
        <el-form :model="formData2" label-width="50px">
            <el-form-item size="small" label="名称：">
                <el-input v-model="formData2.name" placeholder="仓库" size="large"/>
            </el-form-item>
            <el-form-item size="small" label="简介：">
                <el-input v-model="formData2.brief" placeholder="简介" type="textarea"/>
            </el-form-item>
            <el-form-item size="small">
                <el-button type="primary" @click="edit">
                    修改
                </el-button>
            </el-form-item>
        </el-form>
    </el-drawer>
</template>
<script lang="ts" setup>
import {onMounted, ref, reactive} from 'vue'
import {warehouseApi} from '@/api/index'
import {ElMessage, ElMessageBox} from 'element-plus'
import dayjs from 'dayjs'


const formData = reactive({
    areaId: 0,
    name: "",
    brief: ""
})
const formData2 = reactive({
    id: 0,
    name: "",
    brief: "",
    areaId: 0
})
const tableData = ref([])
const areaData = ref([])
const dialog = ref(false)

onMounted(() => {
    callWareHouseApi()
    callAreaApi()
})
const callAreaApi = () => {
    warehouseApi.area_select.call().then((res: any) => {
        areaData.value = res
        formData.areaId = res[0].id
    })
}

const callWareHouseApi = () => {
    warehouseApi.select.call({areaId: formData.areaId == 0 ? undefined : formData.areaId}).then((res: any) => {
        tableData.value = res
    })
}
const add = () => {
    warehouseApi.insert.call({name: formData.name, brief: formData.brief, areaId: formData.areaId}).then((res: any) => {
        ElMessage.success("添加成功")
        callWareHouseApi()
    })
}
const edit = () => {
    warehouseApi.update.call({
        name: formData2.name,
        brief: formData2.brief,
        areaId: formData2.areaId,
        id: formData2.id
    }).then((res: any) => {
        ElMessage.success("修改成功")
        callWareHouseApi()
        dialog.value = false

    })

}
const change = (value: any) => {
    callWareHouseApi()
}
const formatter = (row: any, column: any, cellValue: any, index: any) => {
    return dayjs(cellValue).format('YY年MM月DD日 HH:mm')
}


const deleteClick = (row: any) => {
    ElMessageBox.confirm('确定要删除 ' + row.name + ' 吗?', '警告',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            warehouseApi.delete.call({id: row.id}).then((res: any) => {
                if (res === 1) {
                    ElMessage({message: '删除成功', type: 'success',})
                    callWareHouseApi()
                }
            })
        })
}
const editClick = (row: any) => {
    dialog.value = true
    formData2.id = row.id
    formData2.name = row.name
    formData2.brief = row.brief
    formData2.areaId = row.areaId
}
</script>
<style>


</style>